/*
说明：
实名认证代码位于第104-186行，页脚代码位于187-203行
第64-99行为游戏主要部分，修改后可能导致无法正常运行
*/
/*原作者：一叶孤舟 本代码免费开源，修改请保留作者信息*/
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
  <!-- 显示当前日期时间 -->
  <header>
  <div class="date-time"></div>
  <script src="JavaScript.js"></script> 
  </header>
<title>棋海无涯-一款中国象棋网页小游戏</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<link href="css/chess.css" rel="stylesheet" type="text/css">
<!-- <script> alert("对不起，您的浏览器不支持HTML5，请升级浏览器至IE9、firefox或者谷歌浏览器！")</script> -->
<!DOCTYPE html>
</head>
<body>
<div id="chessBox" class="chess_box">
	<canvas id="chess"></canvas>
	<audio src="audio/click.wav" id="clickAudio" preload="auto"></audio>
	<audio src="audio/select.wav" id="selectAudio" preload="auto"></audio>
	<div class="bn_box" id="bnBox">
		<input type="button" name="restartBtn" id="restartBtn" value="  重新开始  " />
		<input type="button" name="gohomeBtn" id="gohomeBtn" value="  返回首页  " />
		<input type="button" name="regretBtn" id="regretBtn" value="  悔   棋  " />
	</div>
<!--适配手机-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #doublePlayerBtn {
            text-decoration: none;
        }
    </style>
<!--底部信息样式-->
	<style>
		footer {
		text-decoration: none
		text-align: center;
		background-color: transparent; /* 颜色设置 */
		padding: 20px;
		}
	</style>
</div>
<!-- 字体样式调整 -->
<style>
    /* 默认样式 */
    body {
        font-size: 16px;
    }

    /* 当屏幕宽度小于等于600px时，应用以下样式 */
    @media screen and (max-width: 600px) {
        body {
            font-size: 14px;
        }
    }
</style>
<div class="menu_box" id="menuBox">
	<div class="menu_init" id="indexBox"><a id="indexDy">人机对弈</a><a id="indexQj">挑战棋局</a><a id="stypeBtn">更换皮肤</a></div>
	<div class="menu_dy" id="menuDy">
		<div class="menu_info">
			<div class="menu_fh" id="menuFh"></div>
			<label>
				<input name="depth" type="radio" value="2">
				初出茅庐</label>
			<br />
			<label>
				<input name="depth" type="radio" value="3" checked>
				小试牛刀</label>
			<br />
			<label>
				<input name="depth" type="radio" value="4">
				高手过招</label>
		</div>
		<a id="playBtn">开始对弈</a> </div>
	<div class="menu_qj" id="menuQj">
		<div class="menu_info">
			<div class="menu_fh" id="menuGb"></div>
			<label>
				<input name="clasli" type="radio" value="0" checked>
				八卦阵法</label>
			<br />
			<label>
				<input name="clasli" type="radio" value="1">
				很二棋局</label>
			<br />
			<label>
				<input name="clasli" type="radio" value="2">
				七星会阵</label>
		</div>
		<a id = "clasliBtn">开始游戏</a> </div>
</div>
<style>
.date-time {
  text-align: center; /* 水平居中 */
  margin: auto; /* 垂直居中 */
}
</style>
<!-- 实名认证弹窗渲染 -->
<title>实名认证</title>
    <style>
        .popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #BBFFFF;
            border: 1px solid #ccc;
            padding: 50px;
            z-index: 100;
        }
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 99;
        }
    </style>
    <div class="popup" id="authPopup">
		<h1>棋&nbsp;海&nbsp;无&nbsp;涯&nbsp;游&nbsp;戏&nbsp;实&nbsp;名&nbsp;认&nbsp;证</h1><br />
		为防止未成年人沉迷游戏，进入游戏需要实名认证<p>您的信息仅用于实名认证，我们不会存储您的个人信息</p>
        <p><label for="name">个人姓名：</label>
        <input type="text" id="name" name="name" required>
		<p><label for="idNumber">身份证号：</label>  
		<!-- 输入框样式优化 -->
		    <meta name="viewport" content="width=device-width, initial-scale=1.0">
		    <style>
		        input[type="text"] {
		            background-color: gray;
		        }
		    </style>
        <input type="text" id="idNumber" name="idNumber" required>
		<p>
			<style>
				button {
				    background-color: #696969;
				    border-radius: 50%;
				    color: white;
				    border: none;
				    padding: 10px 20px;
				    text-align: center;
				    text-decoration: none;
				    display: inline-block;
				    font-size: 16px;
				    margin: 4px 2px;
				    cursor: pointer;
				}
			</style>
			<button onclick="checkAge()">提交</button>
		</p>
		<!-- 代码结束 -->
    </div>
    <div class="overlay" id="authOverlay"></div>
	<!-- 实名认证验证逻辑，请小心修改 -->
    <script>
        function checkAge() {
            var idNumber = document.getElementById("idNumber").value;
            var birthYear = parseInt(idNumber.substr(6, 4));
            var currentYear = new Date().getFullYear();
            var age = currentYear - birthYear;
            if (isNaN(birthYear)) {
                alert("输入错误，请重新输入");
                return;
            } else if (age >= 18) {
                document.getElementById("authPopup").style.display = "none";
                document.getElementById("authOverlay").style.display = "none";
                alert("您已满18周岁，可以进入游戏，请注意合理安排游戏时间");
            } else {
                alert("为保护未成年人合法权益，您未满18周岁，不能进入游戏");
            }
        }
        document.addEventListener("DOMContentLoaded", function() {
            document.getElementById("authPopup").style.display = "block";
            document.getElementById("authOverlay").style.display = "block";
        });
    </script>
<!--版权信息-->
<footer>
	<p>&copy; <span id="currentYear" >&nbsp;
	</span > 铭贺科技工作室. All rights reserved.
	<!-- 用户协议与隐私政策设置 -->
	</span > 您已充分阅读并理解
    <a href="html/ys.html" style="color: #000000; text-decoration: none;">用户协议</a> 
	</span > 和
	<a href="html/ys.html" style="color: #000000; text-decoration: none;">隐私政策</a><p>
	<a href="https://beian.miit.gov.cn/" style="color: #000000; text-decoration: none;">网站备案号</a>
	&nbsp; &nbsp;&nbsp; <!-- 空格，如不需要可删除 -->
	<a href="https://beian.mps.gov.cn/#/query/webSearch" style="color: #000000; text-decoration: none;">公安备案号</a>
    </footer>
    <script>
        // 获取当前年份并设置到版权信息中
        document.getElementById("currentYear").textContent = new Date().getFullYear();
</script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/play.js"></script>
<script type="text/javascript" src="js/AI.js"></script>
<script type="text/javascript" src="js/gambit.js"></script>
<script type="text/javascript" src="js/clasli.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.2.0.js"></script>
</body>
</html>